import React, { Component, createContext } from 'react'

const { Provider, Consumer } = createContext() // 相当于vue中的provide和inject

function ComB() {
  return (
    <Consumer>
      {(val) => {
        return <div>ComB -- {val}</div>
      }}
    </Consumer>
  )
}

function ComA() {
  return (
    <div>
      ComA
      <ComB />
    </div>
  )
}

export default class App3 extends Component {
  constructor() {
    super();
    this.state = {
      age: 50
    }
    console.log('App3 constructor');
  }


  componentDidMount() {
    console.log('App3 componentDidMount');
  }

  render() {
    console.log('App3 render');
    return (
      <Provider value={this.state.age}>
        <div>
          App3
          <ComA />
        </div>
      </Provider>
    )
  }
}
